/**
 *
 */

import React, {useState} from 'react';
import axios from 'axios';
import "../../mock/mockData"

import moment from 'moment';

import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');


import {Card, Button, ConfigProvider, Input, Drawer, Space, DatePicker, Form, Modal} from 'antd';
import {ExclamationCircleFilled} from '@ant-design/icons';

import CardHeader from './Card_header/CardHeader';
import CardBody from './Card_body/CardBody';
import CardActions from './Card_actions/CardActions';

const {confirm} = Modal;

const Cards = (props) => {
    const [open, setOpen] = useState(false);

    const showDrawer = () => {
        setOpen(true);
    };

    //定义一个对象，用来存储点击编辑按钮后的初始值
    const originData = {
        name: props.name,
        number: props.number,
        dateTime: dayjs(dayjs(props.dateTime).format('YYYY-MM-DD HH:mm:ss'))
    }

    // 创建一个form实例
    const [form] = Form.useForm();
    //定义 编辑的确认按钮
    const editConfirm = (values) => {
        form.validateFields()
            .then((values) => {
                setOpen(false);
                const formData = form.getFieldValue()
                axios.post('/api/data/update', {formData: formData, id: props.id})
                    .then(req => {
                        props.onChange(req.data.data, req.data.sum)
                    })
                    .catch(error => {
                        console.error('出错了:', error);
                    });
            })
            .catch(errorInfo => {
                console.error('验证失败:', errorInfo);
            });
    };

    //定义 编辑的取消按钮
    const onClose = () => {
        form.validateFields()
            .then((values) => {
                setOpen(false);
                form.setFieldsValue(originData);
            })
            .catch(errorInfo => {
                console.error('验证失败:', errorInfo);
            });
    };

    // 定义删除确认按钮
    const showDeleteConfirm = () => {
        confirm({
            title: '你确定要删除吗?',
            icon: <ExclamationCircleFilled/>,
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                axios.post('/api/data/delete', props.id)
                    .then(req => {
                        props.onChange(req.data.data, req.data.sum)
                    })
                    .catch(error => {
                        console.error('出错了:', error);
                    });
            },
            onCancel() {
                console.log('Cancel');
            }
        })
    };


    return (
        <ConfigProvider locale={locale}>
            <div>
                <Card
                    title={<CardHeader name={props.name} id={props.id} onChange={props.onChange}> </CardHeader>}
                    extra={
                        <div>
                            <ConfigProvider theme={{
                                components:
                                    {
                                        Button:
                                            {fontWeight: 550}
                                    }
                            }}>
                                <Button href="#" type="link" style={{margin: "0px 0px 0px 10px"}}
                                        onClick={showDrawer}>编辑</Button>

                                <Button href="#" type="link" danger style={{margin: "-16px"}}
                                        onClick={showDeleteConfirm}>删除</Button>
                            </ConfigProvider>
                        </div>}
                    style={{
                        margin: "17px 14px 0px 17px"
                    }}
                    actions={[
                        <CardActions test="检测" edit="开启" close="关闭"></CardActions>,
                        <CardActions test="AI判别" edit="开启" close="关闭"></CardActions>
                    ]}
                >
                    <CardBody number={props.number} dateTime={props.dateTime}></CardBody>

                    <Drawer
                        title={props.name}
                        placement="right"
                        width={500}
                        onClose={onClose}
                        open={open}
                        extra={
                            <Space>
                                <Button onClick={onClose}>取消</Button>
                                <Button type="primary" onClick={editConfirm}>确认</Button>
                            </Space>
                        }
                    >
                        <Form layout="vertical" form={form} initialValues={originData}>
                            <Form.Item
                                name="name"
                                label="片区名"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入片区名',
                                    },
                                ]}
                            >
                                <Input></Input>
                            </Form.Item>

                            <Form.Item
                                name="number"
                                label="设备数量"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入设备数量',
                                    },
                                ]}
                            >
                                <Input type="number"/>
                            </Form.Item>

                            <Form.Item
                                name="dateTime"
                                label="日期"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择日期',
                                    },
                                ]}
                            >
                                <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间"/>
                            </Form.Item>
                        </Form>
                    </Drawer>
                </Card>
            </div>
        </ConfigProvider>
    )
}

export default Cards;